<template>
  <div class="setting">
    <div v-for="i in iconList" :key="i" class="link-box">
      <router-link v-if="i.url" :to="i.url" class="router-link">
        <el-icon class="inner-div">
          <component :is="i.icon"/>
        </el-icon>
        <p>{{ i.title }}</p>
      </router-link>
      <a class="router-link" v-else @click="linkClick(i.click)">
        <el-icon class="inner-div">
          <component :is="i.icon"/>
        </el-icon>
        <p>{{ i.title }}</p>
      </a>
    </div>
  </div>
  <el-dialog class="quota-alert-dialog" v-model="quotaAlertVisible" width="430px"
             style="background-color: rgb(13, 41, 67)">
    <template #header="{  titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">定额</h4>

      </div>
    </template>
    <quota-alert @close-quota-alert="quotaAlertVisible=false"></quota-alert>
  </el-dialog>


</template>

<script>
import QuotaAlert from "@/components/include/QuotaAlert";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "MenuIcon",
  components: {QuotaAlert},
  data() {
    return {
      iconList: [
        {icon: 'ShoppingCartFull', title: "收银", url: '/System/OrderBack'},
        {icon: 'Dish', title: "继盘", url: '/System/Account'},
        {icon: 'Printer', title: "小票打印", click: 'print'},
        {icon: 'DocumentAdd', title: "手动添加", url: '/System/AddDishes'},
        {icon: 'Search', title: "查询", url: '/System/QueryOrder'},
        {icon: 'Setting', title: "设置", url: '/System/ManageLeft'},
        {icon: 'Wallet', title: "定额", click: 'showQuotaAlert'},
        {icon: 'Edit', title: "退出",click:"logout" }
      ],
      quotaAlertVisible: false
    }
  }, methods: {
    linkClick(m){
      this[m]();
    },
    print(){
      ElMessage({
        message: '正在打印中请稍后.',
        type: 'success',
      })
    }
    ,
    showQuotaAlert() {
      this.$router.push("/System/OrderBack")
      this.quotaAlertVisible = true;
    },
    logout() {
      ElMessageBox.confirm(
          '确定要退出吗?',
          'Warning'
      ).then(() => {
        this.$router.push("/")
      })


    }
  }

}
</script>

<style scoped>

.my-header h4 {
  color: white;
}

.setting {
  width: 100%;
  height: 100%;
}

.link-box {
  width: 25%;
  height: 50%;
  float: left;
}

.router-link {
  display: block;
  float: left;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: gray;
  background-color: rgb(19, 55, 87);
  cursor: pointer;
  box-sizing: border-box;
  border-right: 1px solid rgb(10, 41, 64);
  border-bottom: 1px solid rgb(10, 41, 64);
}


.setting .router-link-active {
  background-color: rgb(45, 109, 167);
  color: white;
}

.setting .inner-div {
  display: block;
  margin: 25% auto auto auto;
  color: white;
  font-size: 30px;
}

.setting p {
  text-align: center;
  margin-top: 20px;
}
</style>